<template>
	<view>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 5upx)">
				<view class="cu-item" :class="index == tabCur ? 'text-green cur' : ''" v-for="(item, index) in list" :key="index" @tap="TabSelect" :data-id="index">
					{{ item.category_name }}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 5upx)" :scroll-into-view="'main-' + mainCur" @scroll="VerticalMain">
				<view class="padding-lr" v-for="(item, index) in list" :key="index" :id="'main-' + index">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text>
							{{ item.category_name }}
						</view>
					</view>
					<view class="padding-sm flex flex-wrap bg-white">
						<view  class="padding-xs" v-for="(tag, index2) in item.tags" @click="navToList(tag.id)" :key="index2" >
							<view class="cu-tag" >{{ tag.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			list: [],
			tabCur: 0,
			mainCur: 0,
			verticalNavTop: 0,
			load: true,
			list: []
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		this.loadData();
		// let list = [{}];
		// for (let i = 0; i < 26; i++) {
		// 	list[i] = {};
		// 	list[i].name = String.fromCharCode(65 + i);
		// 	list[i].id = i;
		// }
		// this.list = list;
		// this.listCur = list[0];
	},
	onReady() {
		uni.hideLoading();
	},
	methods: {
		loadData() {
			var that = this;
			beeApp.api(
				'/mall/tag/getCategory',
				{
					shop_id: 328
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.list = res.data;
					that.listCur = that.list[0];
				}
			);
		},
		navToList(tid) {
			uni.navigateTo({
				url: `/pages/product/list?tid=${tid}`
			});
		},
		TabSelect(e) {
			this.tabCur = e.currentTarget.dataset.id;
			this.mainCur = e.currentTarget.dataset.id;
			this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
		},
		VerticalMain(e) {
			// #ifdef MP-ALIPAY
			return false; //支付宝小程序暂时不支持双向联动
			// #endif
			let that = this;
			let tabHeight = 0;
			if (this.load) {
				for (let i = 0; i < this.list.length; i++) {
					let view = uni.createSelectorQuery().select('#main-' + i);
					view.fields(
						{
							size: true
						},
						data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}
					).exec();
				}
				this.load = false;
			}
			let scrollTop = e.detail.scrollTop + 10;
			for (let i = 0; i < this.list.length; i++) {
				if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
					this.verticalNavTop = (i - 1) * 50;
					this.tabCur = i;
					console.log(scrollTop);
					return false;
				}
			}
		}
	}
};
</script>

<style>
.fixed {
	position: fixed;
	z-index: 99;
}

.VerticalNav.nav {
	width: 200upx;
	white-space: initial;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	background-color: #fff;
	margin: 0;
	border: none;
	height: 50px;
	position: relative;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #f1f1f1;
}

.VerticalNav.nav .cu-item.cur::after {
	content: '';
	width: 8upx;
	height: 30upx;
	border-radius: 10upx 0 0 10upx;
	position: absolute;
	background-color: currentColor;
	top: 0;
	right: 0upx;
	bottom: 0;
	margin: auto;
}

.VerticalBox {
	display: flex;
}

.VerticalMain {
	/* background-color: #f1f1f1; */
	flex: 1;
}
</style>
